<template>
  <el-input
    class="form_item_input"
    v-model="inputValue"
    :type="inputPasswordType"
    :placeholder="$t(placeholderKey)"
  >
    <template #prepend v-if="showPrependIcon">
      <div class="iconfont icon-mima"></div>
    </template>
    <template #suffix v-if="showSuffixIcon">
      <span
        class="iconfont pointer"
        :class="{
          'icon-guanbi': !isShowPassword,
          'icon-faxianxianshimima': isShowPassword,
        }"
        @click="showPassword"
      ></span>
    </template>
  </el-input>
</template>

<script lang="ts">
// 在模块绑定创建中，要实现父子双向绑定，必须是<template><el-input></el-input></template>，即外层不能被其他元素包裹
// 否则双向绑定有问题
import { defineComponent, ref } from "vue";
import { ElInput } from "element-plus";

export default defineComponent({
  components: {
    ElInput,
  },
  setup(props, { emit }) {
    // const {t}  = useI18n()
    // eslint-disable-next-line
    enum InputPasswordType {
      // eslint-disable-next-line
      Password = "password",
      // eslint-disable-next-line
      Text = "text",
    }

    // 显示隐藏密码控制
    let isShowPassword = ref<boolean>(false);
    let inputPasswordType = ref<InputPasswordType>(InputPasswordType.Password);
    const showPassword = () => {
      isShowPassword.value = !isShowPassword.value;
      inputPasswordType.value = isShowPassword.value
        ? InputPasswordType.Text
        : InputPasswordType.Password;
    };

    const inputValue = ref("");
    const handleInput = (e: Event) => {
      const target = e.target as HTMLInputElement;
      inputValue.value = target.value;
      emit("input", inputValue.value);
    };
    return {
      inputValue,
      handleInput,
      isShowPassword,
      inputPasswordType,
      showPassword,
    };
  },
  props: {
    // 是否显示前置图标
    showPrependIcon: {
      type: Boolean,
      default: true
    },
    // 是否显示后置图标
    showSuffixIcon: {
      type: Boolean,
      default: true
    },
    placeholderKey: {
      type:String,
      default: "register_form_register_password1_placeholder"
    }
  }
});
</script>
